/*
 * @Author: silas 
 * @Date: 2021-03-10 16:05:14 
 * @Last Modified by: silas
 * @Last Modified time: 2022-02-01 15:28:05
 */
<template>
  <div class="clearing">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">年底清算</div>
      </div>
    </div>
    <el-form :inline="true" :model="form">
      <el-form-item label="区域" label-width="60px">
        <dx-cascader :area_id.sync="form.areaId" :maxLevel="2" />
      </el-form-item>
      <el-form-item label="年度" label-width="60px">
        <el-date-picker v-model="form.year" type="year" size="mini" placeholder="选择年" value-format="yyyy"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="handle_search()">查询</el-button>
        <el-button size="mini" type="orange" @click="handle_export()">导出</el-button>

        <el-tooltip class="item" effect="dark" content="刷新后台数据" placement="top">
          <el-button size="mini" @click="handle_refresh()" :loading="refresh_loading">刷新</el-button>
        </el-tooltip>
      </el-form-item>
    </el-form>
    <p class="g-unit">单位: 万元</p>
    <div class="tableBox">
      <el-table id="table1" ref="table" size="mini" :header-cell-style="{ background: '#eef1f6' }" :data="tableData" v-loading="tableLoading" style="width: 100%" border>
        <el-table-column prop="areaName" label="区域" fixed />
        <el-table-column label="基础配置">
          <el-table-column min-width="120" label="年初投资画饼" prop="jcHb"></el-table-column>
          <el-table-column min-width="120" label="收入年度预算" prop="jcYs"></el-table-column>
          <el-table-column min-width="120" label="收入年度完成" prop="jcWc"></el-table-column>
          <el-table-column min-width="120" label="收入完成率" prop="jcWcl"></el-table-column>
          <el-table-column min-width="120" label="扣罚次年投资" prop="jcKf"></el-table-column>
        </el-table-column>
        <el-table-column label="ICT专项">
          <el-table-column min-width="120" label="年初投资画饼" prop="ictHb"></el-table-column>
          <el-table-column min-width="130" label="ICT收入年度预算" prop="ictYs"></el-table-column>
          <el-table-column min-width="130" label="ICT收入年度完成" prop="ictWc"></el-table-column>
          <el-table-column min-width="130" label="ICT收入完成率" prop="ictWcl"></el-table-column>
          <el-table-column min-width="120" label="扣罚次年投资" prop="ictKf"></el-table-column>
        </el-table-column>
        <el-table-column label="光网-覆盖及政企双线专项">
          <el-table-column min-width="120" label="年初投资画饼" prop="gwsxHb"></el-table-column>
          <el-table-column min-width="120" label="本年累计下达" prop="gwsxLjxd"></el-table-column>
          <el-table-column min-width="120" label="年终清算应下达" prop="gwsxQsxd"></el-table-column>
          <el-table-column min-width="120" label="次年投资清算" prop="gwsxTzqs"></el-table-column>
        </el-table-column>
        <!-- <el-table-column
                    v-for="(it, i) in titles"
                    :key="i"
                    :label="it.name"
                >
                    <el-table-column
                        min-width="120"
                        v-for="(item, index) in it.children"
                        :key="index"
                        :prop="item.prop"
                        :label="item.name"
                    ></el-table-column>
                </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  name: "clearing",
  data() {
    return {
      accountInfo: "",
      form: {
        areaId: "",
        year: this.moment().format("YYYY"),
      },
      tableLoading: false,
      refresh_loading: false,
      tableData: [],
      titles: [],
    };
  },
  mounted() {
    var that = this;

    that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    that.form.areaId = that.accountInfo.areaId;
    that.getData();
  },
  methods: {
    getData() {
      var that = this,
        titles = [];

      that.tableLoading = true;
      $budgetAPI.getBudgetClearList(
        {
          areaId: that.form.areaId,
          acctYear: that.form.year,
          token: getCookie("token"),
        },
        (res) => {
          console.log(res);
          if (res.code == 0) {
            // res.content.data.map((it) => {
            //     it.detailList.map((item, i) => {
            //         it["indexValue" + i] = item.indexValue;
            //         it["modifyValue" + i] = item.modifyValue;
            //         it["completeBudgetLj" + i] = +item.completeBudgetLj > 0 ? item.completeBudgetLj + '%' : '0';
            //         it["diffValue" + i] = item.diffValue;
            //     });
            // });
            // res.content.titles.map((it, i) => {
            //     var obj = {
            //         name: it,
            //         children: [
            //             {
            //                 name: "画饼",
            //                 prop: "indexValue" + i,
            //             },
            //             {
            //                 name: "本年累计完成",
            //                 prop: "modifyValue" + i,
            //             },
            //             {
            //                 name: "收入完成率",
            //                 prop: "completeBudgetLj" + i,
            //             },
            //             {
            //                 name: "扣罚次年投资",
            //                 prop: "diffValue" + i,
            //             },

            //         ],
            //     };
            //     titles.push(obj);
            // });
            that.tableData = res.content;

            // that.titles = titles;
          }
          that.tableLoading = false;
        }
      );
    },
    handle_search() {
      var that = this;

      that.getData();
    },
    async handle_refresh() {
      this.refresh_loading = true;
      try {
        let { code, message } = await this.fetch($budgetAPI.refreshClearData);
        if (code == 0) {
          this.$message.success("刷新成功");
        } else {
          this.$message.error(message);
        }
      } catch (error) {
        this.$message.error("刷新失败");
      } finally {
        this.refresh_loading = false;
      }
    },
    handle_export() {
      var xlsxParam = {
        raw: true,
      }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
      let workbook = XLSX.utils.book_new();
      let ws1 = XLSX.utils.table_to_sheet(
        document.querySelector("#table1"),
        xlsxParam
      );
      XLSX.utils.book_append_sheet(workbook, ws1, "百元拉动投资");
      let wbout = XLSX.write(workbook, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream;charset=utf-8"',
          }),
          "百元拉动投资.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbOut);
      }
      return wbout;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-form-item {
  margin-bottom: 0;
}
.unit {
  text-align: right;
  font-size: 14px;
  // font-weight: bold;
  padding-bottom: 10px;
}
</style>